<extend name="_layout/main"/>
<block name="head">
    <style>
        #imgcaptcha {
            z-index: 9999;
        }
    </style>
</block>
<block name="top">

</block>
<block name="content">
    <div class="login clearfloat box-s">
        <h3>会员登录</h3>
        <div class="list clearfloat">
            <ul>
                <li class="ra3">
                    <p class="fl clearfloat">
                        <span class="opa5"></span>
                        <i class="iconfont icon-yonghuming"></i>
                    </p>
                    <div class="nr clearfloat fl">
                        <span class="opa3"></span>
                        <input type="text" name="username" id="username" value="{:cookie('remember_login_name')}" placeholder="ID/手机号"/>
                    </div>
                </li>
                <li class="ra3">
                    <p class="fl clearfloat">
                        <span class="opa5"></span>
                        <i class="iconfont icon-mima"></i>
                    </p>
                    <div class="nr clearfloat fl">
                        <span class="opa3"></span>
                        <input type="password" name="password" id="password" placeholder="登录密码"/>
                    </div>
                </li>
                <li class="ra3">
                    <p class="fl clearfloat">
                        <span class="opa5"></span>
                        <i class="iconfont icon-yanzhengma"></i>
                    </p>
                    <div class="nr nrtwo clearfloat fl">
                        <span class="opa3"></span>
                        <input type="text" name="captcha" id="captcha" maxlength="4" placeholder="验证码"/>
                        <samp class="db fr"><img src="{:U('Captcha/show')}" id="imgcaptcha"/></samp>

                    </div>
                </li>
            </ul>
        </div>
        <div class="mima clearfloat">
            <ul>
                <li class="fl">
                    <div class="xuan clearfloat fl">
                        <div class="radiofour">
                            <label>
                                <input type="checkbox" name="remember" id="remember" value="yes"/>
                                <div class="option"></div>
                                <span class="opt-text">记住用户名</span>
                            </label>
                        </div>
                    </div>
                </li>
                <li class="fr">
                    <!--<a href="{:U('Login/forget')}">找回密码？</a>-->
                </li>
            </ul>
        </div>
        <div class="login-btn">
            <a href="javascript:void(0)" id="btn-login">
                登录
            </a>
            <a href="{:U('Register/index')}" class="btn">
                <span class="opa5"></span>
                <samp>注册</samp>
            </a>
        </div>
    </div>
</block>
<block name="scripts">
    <script>
        $(document).on('click', '#imgcaptcha', function (e) {
            var url = "{:U('Captcha/show')}" + '?' + Math.random();
            $(this).attr('src', url);
        })

        $(document).on('click', '#btn-login', function (e) {
            e.preventDefault();
            var username = $("#username").val();
            var password = $('#password').val();
            var captcha = $('#captcha').val();
            var remember = $('#remember:checked').val();

            if (!username || username == '') {
                mui.toast('请填写用户名');
                return;
            }

            if (!password || password == '') {
                mui.toast('请填写密码');
                return;
            }

            if (!captcha || captcha == '') {
                mui.toast('请填写验证码');
                return;
            }

            var data = {};
            data.username = username;
            data.password = password;
            data.captcha = captcha;
            if (remember) {
                data.remember = remember;
            }

            $.post(self.location, data, function (xdata) {
                mui.toast(xdata.info);
                if (xdata.status == 1) {
                    setTimeout(function () {
                        document.location.href = xdata.url;
                    }, 1000)
                }
            }, 'json');
        })
    </script>
</block>